<template>
  <div class="balance">
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="toptab">
      <div
        v-for="(item,index) in tab"
        :key="index"
        class="item"
        :class="tabIndex==index?'active':''"
        @click="onTabTap(index, item)"
      >{{item.text}}
      </div>
    </div>

    <scroller
      @on-pullup-loading="getList"
      lock-x
      ref="scroller"
      :pullup-config="{content:'',upContent:'',downContent:'释放加载更多',loadingContent:'加载中...',autoRefresh: false,clsPrefix: 'xs-plugin-pullup-'}"
      height="-100"
      :use-pullup="true"
      v-model="status"
    >
      <div class="quotaItem">
        <ul class="quotaItem-content">
          <li class="quotaItem-content-list" v-for="(item, index) in list"
              :key="index">
            <div class="quotaItem-content-list-top" :class="quotaClass.listClass">
              <div class="quotaItem-content-list-name">{{item.quota_name}}</div>
              <div class="quotaItem-content-list-text quotaItem-content-list-flex">
                <div>
                  <span class="quotaItem-content-list-text-tit">总额度: </span>
                  <span class="quotaItem-content-list-text-price">￥{{item.quota_amount || '0.00'}}</span>
                </div>
                <div class="app-cursor-pointer quotaItem-content-list-flex-detail" @click="onQuotaDetail(item)">消费明细
                  <span
                    class="el-icon-d-arrow-right">&gt;&gt;</span></div>
              </div>

              <div class="quotaItem-content-list-text quotaItem-content-list-flex">
                <div>
                  <span class="quotaItem-content-list-text-tit">剩余额度: </span>
                  <span class="">￥{{item.quota_residue || '0.00'}}</span>
                </div>
                <!--<div class="app-cursor-pointer quotaItem-content-list-flex-detail" v-if="type == 1" @click="onQuotaDetail(item)">消费明细 <span-->
                <!--class="el-icon-d-arrow-right">&gt;&gt;</span></div>-->
              </div>
            </div>

            <div class="quotaItem-content-list-bottom">
              <div class="quotaItem-content-list-text">
                <span class="quotaItem-content-list-text-tit">有效期: </span>
                <span class="quotaItem-content-list-text-desc" v-if="parseFloat(item.quota_type)">永久有效</span>
                <span class="quotaItem-content-list-text-desc" v-else>{{item.start_date}}~{{item.end_date}}</span>
              </div>
              <div class="quotaItem-content-list-text">
                <span class="quotaItem-content-list-text-tit">适用于: </span>
                <span class="quotaItem-content-list-text-desc">{{item.cate_name}}</span>
              </div>
              <div class="quota-btn-use">
<!--                <div class="quota-btn-use-border"></div>-->
                <div :class="['quotaItem-content-list-btn', quotaClass.btnClass]" @click="onQuota(item.id)">
                  {{quotaClass.btnText}}
                </div>
<!--                <div class="quota-btn-use-border"></div>-->
              </div>
            </div>
          </li>
        </ul>
      </div>
      <load-more
        v-if="!more&&!list.length"
        :show-loading="false"
        :tip="'暂无数据'"
        background-color="#fbf9fe"
      ></load-more>
    </scroller>

  </div>
</template>

<script>
  import Me from '@/dll/me'

  export default {
    name: 'balance',
    data () {
      return {
        xheader: {
          title: '额度管理'
        },
        status: {
          pullupStatus: 'default'
        },
        tab: [{
          text: '可使用',
          state: 1
        }, {
          text: '已使用',
          state: 3
        }, {
          text: '已作废',
          state: 2
        }, {
          text: '已过期',
          state: 4
        }],
        tabIndex: 0,
        list: [],
        page: 1,
        more: true,
        type: 1
      }
    },
    computed: {
      quotaClass () {
        let obj = {
          listClass: '',
          btnClass: '',
          btnText: ''
        }
        if (this.type === 1) { // 可使用
          obj.listClass = 'quotaItem-content-list-use'
          obj.btnClass = 'quotaItem-content-list-flex-use'
          obj.btnText = '立即使用'
        } else if (this.type === 3) { // 已使用
          obj.listClass = 'quotaItem-content-list-use-at'
          obj.btnClass = 'quotaItem-content-list-flex-use-at'
          obj.btnText = '已使用'
        } else if (this.type === 2) { // 已作废
          obj.listClass = 'quotaItem-content-list-use-no'
          obj.btnClass = 'quotaItem-content-list-flex-use-no'
          obj.btnText = '已作废'
        } else if (this.type === 4) { // 已过期
          obj.listClass = 'quotaItem-content-list-use-no'
          obj.btnClass = 'quotaItem-content-list-flex-use-no'
          obj.btnText = '已过期'
        }
        return obj
      }
    },
    activated () {
      this.init()
    },
    methods: {
      init () {
        this.page = 1
        this.more = true
        this.list = []
        this.getList()
        this.status.pullupStatus = 'disabled'
        this.$nextTick(function () {
          this.$refs.scroller.enablePullup()
          this.$refs.scroller.reset({
            top: 0
          })
          this.status.pullupStatus = 'default'
        })
      },
      onTabTap (index, item) {
        this.tabIndex = index
        this.type = item.state
        this.init()
      },
      async getList () {
        let page = this.page
        let param = {
          page: page,
          type: this.type
        }
        if (!this.more) {
          return
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Me.getQuotalList(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          let { data } = res
          if (page >= data.page_param.lastPage) {
            this.more = false
            this.$refs.scroller.disablePullup()
          } else {
            this.$refs.scroller.donePullup()
          }
          let list = []
          for (const i in data.data) {
            list.push(data.data[i])
          }
          this.page = page + 1
          this.list = [].concat(this.list, list)
          this.$forceUpdate()
        } else {
          this.more = false
          this.$forceUpdate()
          this.$refs.scroller.disablePullup()
        }
      },
      onQuotaDetail (item) {
        this.$router.push({
          name: 'balanceDetails',
          query: { quotaId: item.id, quotaAmount: item.quota_amount, quotaResidue: item.quota_residue }
        })
      },

      // 可使用的商品可以跳转
      onQuota (id) {
        if (this.type === 1) {
          this.$router.push({ name: 'mallSearch', query: { quota_id: id } })
        }
      }
    }
  }
</script>

<style scoped lang="less">
  * {
    box-sizing: border-box;
  }

  .balance {
    background: #fff;

    * {
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    ul {
      margin: 0;
      padding: 0;
    }

    .toptab {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      padding-left: 12px;
      padding-right: 12px;
      height: 45px;
      background-color: #fff;
    }

    .toptab > .item {
      flex: 1;
      height: 100%;
      display: block;
      line-height: 45px;
      font-size: 14px;
      color: #351009;
      opacity: 0.2;
      text-align: center;
      position: relative;
    }

    .toptab > .item.active {
      opacity: 1;
    }

    .toptab > .item.active::after {
      position: absolute;
      content: "";
      width: 100%;
      bottom: 0;
      left: 0;
      height: 1px;
      background: #b0290f;
    }

    .quotaItem {
      padding: 20px 10px 10px;
      margin-bottom: 60px;
      font-size: 14px;

      .app-item-border {
        border: 1px solid #e2e2e2;
      }

      .quotaItem-content {

        .quotaItem-content-list {
          margin: 0 10px 10px 0;
          border-radius: 15px;
          width: 100%;
          height: auto;
          color: #fff;
          background: #F3F3F3;

          .quotaItem-content-list-top {
            color: #fff;
            height: 120px;
            background-size: cover;
            background-repeat: no-repeat;
            padding: 10px;
          }

          .quotaItem-content-list-bottom {
            min-height: 80px;
            color: #222;
            padding: 10px;
          }

          .quotaItem-content-list-name {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .quotaItem-content-list-text {
            display: flex;
            margin: 7px 0;
            line-height: 20px;

            .quotaItem-content-list-text-tit {
              margin-right: 10px;
              /*width: 65px;*/
              /*text-align: right;*/
              flex-shrink: 0;
              display: inline-block;
            }

            .quotaItem-content-list-text-desc {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              position: relative;
              color: #757575;
            }

            .quotaItem-content-list-text-price {
              font-weight: bold;
              font-size: 24px;
            }
          }
        }
      }
    }

    .quotaItem-content-list-flex {
      display: flex;
      justify-content: space-between;
    }

    .quotaItem-content-list-btn {
      width:26%;
      border-radius:12px;
      border: 1px solid;
      text-align: center;
      background: #fff;
      padding: 2.5px 0;
    }

    .quotaItem-content-list-flex-use {
      color: #757575;
      border-color: #1976D2;
      cursor: pointer;
    }

    .quotaItem-content-list-flex-use-at {
      color: #757575;
      cursor: not-allowed;
      border-color: #BBDEFB;
    }

    .quotaItem-content-list-flex-use-no {
      color: #757575;
      cursor: not-allowed;
      border-color: #D9D9D9;
    }

    .quotaItem-content-list-use {
      background-image: url("../../../assets/img/icon_quota_use.png");
    }

    .quotaItem-content-list-use-at {
      background-image: url("../../../assets/img/icon_quota_use-at.png");
    }

    .quotaItem-content-list-use-no {
      background-image: url("../../../assets/img/icon_quota_use-no.png");
    }

    .quota-btn-use {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0 5px;

      .quota-btn-use-border {
        border-bottom: 1px dashed #457bbe;
        width: 35%;
      }
    }
  }
</style>
